<template>
  <div class="admin-portal">
    <h2>系统管理员端功能导航</h2>
    <div class="feature-grid">
      <router-link class="feature-card" to="/admin/letter-stat">
        <div class="icon">📊</div>
        <div class="title">全校信件统计</div>
        <div class="desc">查看全校信件发送、阅读、趋势等统计数据</div>
      </router-link>
      <router-link class="feature-card" to="/admin/member-manage">
        <div class="icon">👥</div>
        <div class="title">成员管理</div>
        <div class="desc">管理教师、学生、家长等系统成员</div>
      </router-link>
    </div>
    <div style="text-align:center;margin-top:32px;">
      <router-link to="/">返回登录</router-link>
    </div>
  </div>
</template>
<script>
export default { name: 'Admin' }
</script>
<style scoped>
.admin-portal {
  max-width: 900px;
  margin: 40px auto;
  padding: 32px 16px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
h2 {
  text-align: center;
  margin-bottom: 36px;
  color: #3a3a3a;
}
.feature-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
}
.feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 220px;
  padding: 32px 18px 26px 18px;
  background: linear-gradient(135deg, #e0e7ff 0%, #f0f4ff 100%);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(102,126,234,0.08);
  text-decoration: none;
  color: #333;
  transition: box-shadow 0.2s, transform 0.2s;
}
.feature-card:hover {
  box-shadow: 0 8px 24px rgba(102,126,234,0.18);
  transform: translateY(-4px) scale(1.04);
}
.icon {
  font-size: 40px;
  margin-bottom: 18px;
}
.title {
  font-size: 19px;
  font-weight: bold;
  margin-bottom: 8px;
}
.desc {
  font-size: 14px;
  color: #666;
  text-align: center;
}
</style> 